<template>
  <div class="theSideNav-wrapper flex-d">
    <el-row class="tac">
      <el-col :span="24">
        <el-menu default-active="3" class="el-menu-vertical-demo" active-text-color="#fff" router>

          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-menu-item index="goods">
            <i class="el-icon-s-goods"></i>
            <span slot="title">商品</span>
          </el-menu-item>
          <!-- <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>商品</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">商品列表</el-menu-item>
              <el-menu-item index="1-2">商品分类</el-menu-item>
              <el-menu-item index="1-3">快递模板</el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->

          <el-menu-item index="marketing">
            <i class="el-icon-s-grid"></i>
            <span slot="title">营销</span>
          </el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TheSideNav',
  data() {
    return {
    };
  },
  methods: {

  }
}
</script>

<style scoped>
.theSideNav-wrapper {
  position: fixed;
  left: 0;
  top: 7rem;
  width: 16.6rem;
  height: calc(100vh - 7rem);
  box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 10%);
  padding: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 7;
  justify-content: flex-start;
}

.el-row {
  width: 100%;
}

.el-menu {
  border-right: 0;
}

>>>.el-menu-item,
.el-submenu__title {
  height: 40px;
  line-height: 40px;
  margin: 8px 0;
  border-radius: 4px;
}

>>>.el-submenu .el-menu-item {
  min-width: 0;
}

>>>.el-menu-item.is-active {
  background-color: #409EFF;
}
</style>
